<template>
  <div class="information">
    <view class="information_header">
      <view class="information_header_title"
        :style="'padding-top:' + demoSize.top + 'px;' + 'height:' + demoSize.height + 'px;'">
        <image @click="onTapBack" class="information_header_title_button" src="/static/tabs/blackback.png"
          mode="scaleToFit" />
        <view class="information_header_title_nav">个人信息</view>
      </view>
    </view>
    <view class="information_main">
      <view class="information_main_profile">
        <image class="information_main_profile_head" :src="LogoImg" mode="aspectFill" />
        <!-- <uni-file-picker limit="1" :del-icon="false" disable-preview :imageStyles="imageStyles" file-mediatype="image"
          @success="success" @fail="fail"> -->
        <image class="information_main_profile_updateicon" src="/static/tabs/htx.png" mode="scaleToFit"
          @click="uplodimg" />
        <!-- </uni-file-picker> -->

      </view>
      <view class="information_main_about">
        <view class="information_main_about_items">
          <text>昵称</text>
          <view>
            <input maxlength="6" class="uni-input" :focus="isFocus" v-model="nickname" placeholder="" @blur="getblur" />
            <image @click="focueInput" src="/static/tabs/bianji.png" mode="scaleToFit" />
          </view>
        </view>
        <view @click="toAgreement" class="information_main_about_items">
          <text>用户服务协议</text>
          <image src="/static/tabs/more.png" mode="scaleToFit" />
        </view>
        <view @click="toPrivacypolicy" class="information_main_about_items">
          <text>隐私政策</text>
          <image src="/static/tabs/more.png" mode="scaleToFit" />
        </view>
      </view>
      <view class="information_main_exit" @click="dropout">
        退出账号
      </view>
    </view>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { onLoad, onShow } from "@dcloudio/uni-app"
import { EditUsersInfo, GetUserInfo, UploadImagetep } from '@/api/user'
import { useUserStore } from '@/stores'
const userStore = useUserStore()
const nickname = ref('好柿豆花生生')
const isFocus = ref(false)
const demoSize = reactive({ //胶囊位置
  top: 0,
  height: 0
})
const imageStyles = reactive({
  width: 38,
  height: 38,
  border: {
    radius: '50%'
  }
})
const LogoImg = ref('')
onLoad(() => {
  // 获取小程序右上角胶囊位置信息
  const demo = uni.getMenuButtonBoundingClientRect()
  demoSize.top = demo.top
  demoSize.height = demo.height
  nickname.value = userStore.userInfo?.nickName
  LogoImg.value = userStore.userInfo?.logoImg
})
onShow(() => { })
const onTapBack = () => {
  uni.navigateBack({
    delta: 1 // 表示返回上一级页面，如果 delta 大于 1 则返回多级页面  
  });
}
const focueInput = () => {
  isFocus.value = !isFocus.value
}
const getblur = async () => {
  let res = await EditUsersInfo({
    iD: userStore.userInfo?.id,
    logoImg: LogoImg.value,
    nickName: nickname.value
  })
  if (res.code == '0') {
    getUserInfo()
  }
}
// 获取用户信息
const getUserInfo = async () => {
  const res: any = await GetUserInfo()
  if (res.code == '0') {
    // userStore.setUserInfo(res.data)
    userStore.userInfo.nickName = res.data.nickName
    userStore.userInfo.logoImg = res.data.logoImg
  }
}
const uplodimg = () => {
  uni.chooseImage({
    count: 1, //默认9
    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
    sourceType: ['album'], //从相册选择
    success: function (res) {
      convertToBase64(res.tempFilePaths[0])
    }
  });
}
function convertToBase64(filePath) {
  const fs = uni.getFileSystemManager(); // 获取文件系统管理器  
  fs.readFile({
    filePath: filePath, // 要读取的文件路径  
    encoding: 'base64', // 以Base64编码读取文件  
    success: async (result) => {
      const base64Data = result.data; // 获取Base64编码的字符串  
      // console.log('Base64编码的图片数据:', base64Data);
      let res = await UploadImagetep({
        img: base64Data
      })
      LogoImg.value = res.data.imgurl
      getblur()
    },
    fail: (err) => {
      console.error('读取文件失败:', err);
    }
  });
}
const toAgreement = () => {
  uni.navigateTo({
    url: '/pages/agreement/index'
  })
}
const toPrivacypolicy = () => {
  uni.navigateTo({
    url: '/pages/privacypolicy/index'
  })
}
// 上传成功
const dropout = () => {
  userStore.setUserInfo({})
  uni.navigateBack({
    delta: 1 // 表示返回上一级页面，如果 delta 大于 1 则返回多级页面  
  });
}
</script>

<style lang="scss">
page {
  background-color: #fff;
}

.information {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  &_header {
    width: 100%;
    height: 252rpx;
    background-color: #fff;

    &_title {
      display: flex;
      position: relative;
      align-items: center;
      width: 100%;

      &_nav {
        left: 50%;
        transform: translateX(-50%);
        font-weight: 500;
        font-size: 34rpx;
        width: 136rpx;
        position: absolute;
      }

      &_button {
        font-weight: 500;
        font-size: 34rpx;
        position: absolute;
        left: 34rpx;
        width: 18rpx;
        height: 35rpx;
      }
    }

    &_person {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 54rpx;

      &_left {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 60rpx;

        image {
          width: 100rpx;
          height: 100rpx;
          border-radius: 50%;
          margin-right: 12rpx;
        }

        text {
          font-weight: 500;
          font-size: 32rpx;
          color: #333333;
        }
      }

      &_right {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 188rpx;
        height: 72rpx;
        background: rgba(86, 63, 48, 0.1);
        border-radius: 36rpx;
        font-weight: 500;
        font-size: 30rpx;
        color: #563F30;
        margin-right: 60rpx;

        image {
          width: 32rpx;
          height: 28rpx;
          margin-right: 12rpx;
        }
      }
    }
  }

  &_main {
    width: calc(100% - 64rpx);

    &_profile {
      position: relative;
      width: 192rpx;
      height: 192rpx;
      margin: auto;

      &_head {
        width: 192rpx;
        height: 192rpx;
        border-radius: 50%;
      }

      &_updateicon {
        width: 76rpx;
        height: 76rpx;
        position: absolute;
        bottom: 0;
        right: 0;
      }

      .file-picker__box {
        position: absolute;
        bottom: 0;
        right: 0;
      }

      .file-picker__box-content {
        border: none !important;
        margin: 0 !important;
      }
    }

    &_about {
      margin-top: 70rpx;

      &_items {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 30rpx;
        margin-top: 30rpx;
        border-bottom: 2rpx solid #EFEFEF;

        view {
          display: flex;
          align-items: center;

          input {
            text-align: right;
          }

          image {
            width: 32rpx;
            height: 32rpx;
            margin-left: 18rpx;
          }
        }

        image {
          width: 10rpx;
          height: 20rpx;
        }
      }
    }

    &_exit {
      width: 656rpx;
      height: 92rpx;
      border-radius: 46rpx;
      border: 2rpx solid #222222;
      margin: auto;
      position: absolute;
      bottom: 168rpx;
      font-weight: 500;
      font-size: 30rpx;
      color: #222222;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>